<template>
  <div id="app">
    <transition :name="move" class="container">
      <keep-alive :include="includes">
        <router-view />
      </keep-alive>
    </transition>
  </div>
</template>

<script>
import VConsole from "vconsole";
import { mapActions, mapMutations } from "vuex";
import setRem from "@/utils/resetRem"
import { Toast } from "vant";
let lastClickTime = 0;
let lastClickX = 0;

const openVConsole = function (e) {
  const now = Date.now();
  if (now - lastClickTime < 500) {
    if (e.pageY < 10 && e.pageX - lastClickX > 50) {
      const vconsole = new VConsole();
    }
  }
  lastClickX = e.pageX;
  lastClickTime = now;
};

export default {
  created() {
    document.body.addEventListener("click", openVConsole);
    this.authLogin();
  },

  mounted() {
    let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
    if (isiOS) {
      window.onpageshow = function () {
        setRem()
      }
    }
  },

  watch: {
    // 监控路由属性的变化
    $route: {
      handler(to, from) {
        if (to && from) {
          //  点右边的按钮,页面从 右边进, 点左边的按钮从左边进
          if (to.meta.index >= from.meta.index) {
            this.move = "slide-left";
          } else {
            this.move = "slide-right";
          }
        }
      },
      //   -初始化,就先执行一次
      immediate: true
    }
  },
  methods: {
    ...mapActions(["login"]),
    ...mapMutations(["SET_DATA"]),
    authLogin() {
      if (process.env.VUE_APP_PREVIEW == "true") {
        if (navigator.userAgent.indexOf("AlipayClient") > -1 || navigator.userAgent.indexOf("mPaaSClient") > -1) {
          dd.ready(() => {
            this.authLogin();
          });
        } else {
          this.SET_DATA({ key: "is_dd", data: 0 });
          sessionStorage.setItem("is_dd", "0");
        }
      } else {
        this.authLogin();
      }
    },
    authLogin() {
      this.login()
        .then(res => {
          sessionStorage.setItem("is_dd", "1");
          sessionStorage.setItem("is_login", "1");
          this.SET_DATA({ key: "is_dd", data: 1 });
          this.SET_DATA({ key: "is_login", data: 1 });
        })
        .catch(err => {
          Toast(err.msg);
          this.SET_DATA({ key: "is_login", data: 0 });
          sessionStorage.setItem("is_login", "0");
        });
    }
  },

  data() {
    return {
      move: "slide-left",
      includes: "ObjectionHandle,NormalReport,appraisalResults,appraisalProcessList"
    };
  },
  beforeDestroy() {
    document.body.removeEventListener("click", openVConsole);
  }
};
</script>
<style lang="scss" scoped>
// 路由切换动画
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: all 0.4s linear;
}

.slide-left-enter-active,
.slide-right-enter-active {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.slide-right-enter {
  transform: translate(-100%);
}

.slide-right-leave-to {
  transform: translate(100%);
}

.slide-left-enter {
  transform: translate(100%);
}

.slide-left-leave-to {
  transform: translate(-100%);
}
</style>
